@width: 280px;

.notification {
    position: fixed;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    box-sizing: border-box;
    margin: var(--margin-xs) 0;

    &-notice {
        display: flex;
        gap: var(--margin-xs);
        justify-content: space-between;

        width: @width;
        padding: var(--padding-lg);

        font-size: var(--font-size-lg);

        background-color: rgb(var(--color-white));
        border-radius: var(--border-radius-base);
        box-shadow: var(--box-shadow-lg);

        &-wrapper {
            margin: var(--margin-xs) var(--margin-base);
        }

        &-content {
            display: inline-flex;
            gap: var(--margin-xs);
            align-items: center;
            align-items: flex-start;
        }

        &-close {
            cursor: pointer;

            display: flex;
            align-items: center;
            justify-content: center;

            width: fit-content;
            height: fit-content;
            padding: var(--padding-xs);

            color: rgb(var(--text-color-secondary));

            border-radius: var(--border-radius-base);
            outline: none;

            transition: background-color 0.2s;

            &:hover {
                background-color: rgb(var(--bg-color-hover));
            }
        }
    }

    &-icon {
        padding: var(--padding-xs);

        &-success {
            color: rgb(var(--success-color));
        }

        &-info {
            color: rgb(var(--info-color));
        }

        &-warning {
            color: rgb(var(--warning-color));
        }

        &-error {
            color: rgb(var(--error-color));
        }
    }

    &-content-container {
        display: inline-flex;
        flex-direction: column;
        gap: var(--margin-xs);
        align-items: flex-start;

        padding-top: var(--padding-xs);
    }

    &-title {
        color: rgb(var(--text-color));
    }

    &-content {
        color: rgb(var(--text-color-secondary));

        &-ellipsis {
            overflow: hidden;
            // Omit beyond the specified number of lines
            display: -webkit-box;
            text-overflow: ellipsis;

            -webkit-box-orient: vertical;
        }
    }

    // Position
    &-top,
    &-topLeft,
    &-topRight {
        top: 0;
    }

    &-bottom,
    &-bottomRight,
    &-bottomLeft {
        bottom: 0;
    }

    &-bottomRight,
    &-topRight {
        right: 0;
    }

    // Animation
    &-fade {
        overflow: hidden;
        transition: all 0.3s;
    }

    &-fade-appear-prepare {
        opacity: 0;
    }

    &-fade-appear-start {
        transform: translateX(100%);
        opacity: 0;
    }

    &-fade-appear-active {
        transform: translateX(0);
        opacity: 1;
    }

    .fade-effect() {
        animation-duration: 0.3s;
        animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
        animation-fill-mode: both;
    }

    &-fade-appear,
    &-fade-enter {
        opacity: 0;
        animation-play-state: paused;
        .fade-effect();
    }

    &-fade-leave {
        .fade-effect();

        animation-play-state: paused;
    }

    &-fade-appear&-fade-appear-active,
    &-fade-enter&-fade-enter-active {
        animation-name: notification-fade-in;
        animation-play-state: running;
    }

    &-fade-leave&-fade-leave-active {
        animation-name: notification-fade-out;
        animation-play-state: running;
    }

    @keyframes notification-fade-in {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes notification-fade-out {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}
